<template>
  <t-card theme="poster2" :bordered="false" @click="handleCardClick(product)">
    <template #content>
      <t-space direction="vertical">
        <t-image :src="product.img" style="{ width:240px;height: 180px}" fit="cover" position="center" shape="round" />
      </t-space>
      <p class="list-card-item_detail--name">{{ product.name }}</p>
    </template>
  </t-card>
</template>

<script setup lang="ts">
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
import { type PropType, ref } from 'vue';

import { INITIAL_DATA } from '@/pages/form/base/constants';
import router from '@/router';

import type { FormData } from './components/DialogForm.vue';
import DialogForm from './components/DialogForm.vue';
export interface CardProductType {
  Id: number;
  name: string;
  type: string;
  img: string;
}
const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });


const props = defineProps({
  product: {
    type: Object as PropType<CardProductType>,
  },
});

// const emit = defineEmits(['manage-product', 'delete-item']);

// const typeMap = ['A', 'B', 'C', 'D', 'E'];

/* const handleClickManage = (product: CardProductType) => {
  emit('manage-product', product);
};

const handleClickDelete = (product: CardProductType) => {
  emit('delete-item', product);
}; */

const handleCardClick = async (product: { type: string; Id: number }) => {
  // 获取某个商品的详细信息并渲染
  if (product.type === 'item') {
    console.log(product);
    console.log('我是奶龙');
    try {
      const response = await axios.get('/api/user/getItemInfo', {
        params: {
          id: product.Id,
        },
      });
      const response1 = await axios.get('/api/user/getRest', {
        params: {
          id: product.Id,
        },
      });
      console.log(response.data);
      console.log(response1.data);
      const detailData = response.data.data;
      const detailRest = response1.data.data;
      sessionStorage.setItem('img', detailData.img);
      sessionStorage.setItem('name', detailData.name);
      sessionStorage.setItem('price', detailData.price);
      sessionStorage.setItem('describe', detailData.describe);
      sessionStorage.setItem('type', product.type);
      sessionStorage.setItem('rest', detailRest.rest);
      // sessionStorage.setItem('id', product.id.toString());
      console.log('我不是奶龙我是session');
      console.log(sessionStorage);
      router.push({
        path: '/shop/detail',
        query: {
          id: product.Id, // 商品id
        },
      });
    } catch (error) {
      // 处理请求错误
      console.error('操作失败:', error);
      // 可以选择显示一个错误消息给用户
      MessagePlugin.error('操作失败，请稍后再试。');
    }
  } else if (product.type === 'service') {
    try {
      const response = await axios.get('/api/user/getItemInfo', {
        params: {
          id: product.Id, // 订单id
        },
      });
      const response1 = await axios.get('/api/user/getServiceTime', {
        params: {
          id: product.Id, // 订单id
        },
      });
      console.log(response.data);
      console.log(response1.data);
      const detailData = response.data.data;
      // 拆开获得开始和结束的时间，并存储
      const detailTimeBegin = [];
      const detailTimeEnd = [];
      let i = 0;
      for (i = 0; i < response1.data.data.list.length; i++) {
        detailTimeBegin[i] = response1.data.data.list[i].date;
        detailTimeEnd[i] = response1.data.data.list[i].time;
      }
      sessionStorage.setItem('img', detailData.img);
      sessionStorage.setItem('name', detailData.name);
      sessionStorage.setItem('price', detailData.price);
      sessionStorage.setItem('describe', detailData.describe);
      sessionStorage.setItem('type', product.type);
      sessionStorage.setItem('rest', detailData.rest);
      sessionStorage.setItem('timeBegin0', detailTimeBegin[0]);
      sessionStorage.setItem('timeEnd0', detailTimeEnd[0]);
      sessionStorage.setItem('i', response1.data.data.list.length);
      if (response1.data.data.list.length > 1) {
        sessionStorage.setItem('timeBegin1', detailTimeBegin[1]);
        sessionStorage.setItem('timeEnd1', detailTimeEnd[1]);
      }
      if (response1.data.data.list.length > 2) {
        sessionStorage.setItem('timeBegin2', detailTimeBegin[2]);
        sessionStorage.setItem('timeEnd2', detailTimeEnd[2]);
      }

      if (response1.data.data.list.length > 3) {
        sessionStorage.setItem('timeBegin3', detailTimeBegin[3]);
        sessionStorage.setItem('timeEnd3', detailTimeEnd[3]);
      }

      if (response1.data.data.list.length > 4) {
        sessionStorage.setItem('timeBegin4', detailTimeBegin[4]);
        sessionStorage.setItem('timeEnd4', detailTimeEnd[4]);
      }

      if (response1.data.data.list.length > 5) {
        sessionStorage.setItem('timeBegin5', detailTimeBegin[5]);
        sessionStorage.setItem('timeEnd5', detailTimeEnd[5]);
      }

      if (response1.data.data.list.length > 6) {
        sessionStorage.setItem('timeBegin6', detailTimeBegin[6]);
        sessionStorage.setItem('timeEnd6', detailTimeEnd[6]);
      }

      if (response1.data.data.list.length > 7) {
        sessionStorage.setItem('timeBegin7', detailTimeBegin[7]);
        sessionStorage.setItem('timeEnd7', detailTimeEnd[7]);
      }

      if (response1.data.data.list.length > 8) {
        sessionStorage.setItem('timeBegin8', detailTimeBegin[8]);
        sessionStorage.setItem('timeEnd8', detailTimeEnd[8]);
      }
      if (response1.data.data.list.length > 9) {
        sessionStorage.setItem('timeBegin9', detailTimeBegin[9]);
        sessionStorage.setItem('timeEnd9', detailTimeEnd[9]);
      }

      // sessionStorage.setItem('id', product.id.toString());
      router.push({
        path: '/shop/detail',
        query: {
          id: product.Id, // 商品id
        },
      });
    } catch (error) {
      // 处理请求错误
      console.error('操作失败:', error);
      // 可以选择显示一个错误消息给用户
      MessagePlugin.error('操作失败，请稍后再试。');
    }
  } else {
    console.log('解析类型错误！');
  }
};
</script>

<style lang="less" scoped>
.list-card-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;

  &_detail {
    min-height: 140px;

    &--name {
      margin-bottom: var(--td-comp-margin-s);
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
    }

    &--desc {
      color: var(--td-text-color-secondary);
      font: var(--td-font-body-small);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
